<template>
    <div>
        <header-view></header-view>
        <div class="login-wrap">
            <el-breadcrumb separator="/"
                           style="font-size: 24px;margin-left: 12px;margin-bottom: 10px; padding-top: 15px">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 康复评估
                </el-breadcrumb-item>
            </el-breadcrumb>
            <div class="container">
                <el-button type="primary" icon="el-icon-d-arrow-left" @click="handleReturn"
                           style="margin-bottom: 18px;">返回上一层
                </el-button>
                <div class="handle-box">
                    姓名：
                    <el-input v-model="query.patientName" placeholder="姓名" class="handle-input mr10"
                              @keyup.enter.native="handleSearch" style="width: 140px"></el-input>
                    &emsp;评估时间：
                    <el-date-picker style="width: 20%;"
                                    v-model="query.startTime"
                                    type="date"
                                    clearable
                                    placeholder="评估开始时间"
                                    value-format="yyyy-MM-dd"
                                    :picker-options="startTimeMethod()"
                                    @keyup.enter.native="handleSearch"></el-date-picker>
                    ~
                    <el-date-picker style="width: 20%;"
                                    v-model="query.endTime"
                                    type="date"
                                    placeholder="评估结束时间"
                                    value-format="yyyy-MM-dd"
                                    :picker-options="endTimeMethod()"
                                    @keyup.enter.native="handleSearch"></el-date-picker>&emsp;
                    得分：
                    <el-input v-model="query.minValue" placeholder="最小值" class="handle-input mr10"
                              @keyup.enter.native="handleSearch" style="width: 140px"></el-input>
                    ~
                    <el-input v-model="query.maxValue" placeholder="最大值" class="handle-input mr10"
                              @keyup.enter.native="handleSearch" style="width: 140px"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch" style="margin-left: 20px">搜索
                    </el-button>
                    <el-button type="el-button" icon="el-icon-delete" @click="handleReset">重置</el-button>
                    <el-button type="primary" icon="el-icon-edit" @click="handleStart" style="margin-left: 90px">
                        开始评估
                    </el-button>
                </div>

                <el-table
                        :data="tableData"
                        border
                        class="table"
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                        @current-change="handleSelectionChange"
                >
                    <!--                    <el-table-column type="selection" width="55" align="center"></el-table-column>-->
                    <el-table-column width="55" align="center">
                        <template slot-scope="scope">
                            <el-radio v-model="radio" :label="scope.row.assesId">
                                <span class="el-radio__label"></span>
                            </el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column prop="assesId" label="评估ID" align="center"></el-table-column>
                    <el-table-column prop="patientName" label="姓名" align="center"></el-table-column>

                    <el-table-column v-if="false" prop="patientPhone" label="手机号" align="center"></el-table-column>
                    <el-table-column v-if="false" prop="patientBirth" label="出生日期" align="center"></el-table-column>
                    <el-table-column v-if="false" prop="patientAge" label="年龄" align="center"></el-table-column>
                    <el-table-column v-if="false" prop="patientCardNo" label="身份证号" align="center"></el-table-column>

                    <el-table-column prop="assesKey" label="评估类型" align="center"></el-table-column>
                    <el-table-column prop="startTime" label="评估开始时间" align="center"></el-table-column>
                    <el-table-column prop="endTime" label="评估结束时间" align="center"></el-table-column>
                    <el-table-column prop="assesGrade" label="得分" width="180" align="center"></el-table-column>
                    <el-table-column label="操作" width="180" align="center">
                        <template slot-scope="scope">
                            <el-button
                                    type="text"
                                    icon="el-icon-thumb"
                                    @click="handleReport(scope.$index, scope.row)"
                            >查看报告
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                            background
                            layout="total, prev, pager, next"
                            :current-page="query.pageIndex"
                            :page-size="query.pageSize"
                            :total="pageTotal"
                            @current-change="handlePageChange"
                    ></el-pagination>
                </div>
            </div>
        </div>
        <!--评估报告-->
        <el-dialog :visible.sync="visible" width="60%" :before-close="closeEdit" :fullscreen=true>
            <el-button type="primary" v-print="'#print'">打 印</el-button>
            <el-button @click="closeEdit">关 闭</el-button>
            <div id="print">
                <!--基本信息-->
                <el-row style="margin-top: 10px">
                    <el-col :span="24">
                        <div style="text-align: center;">
                            <span style="font-size: 40px;color: black;font-weight: bold">评估报告</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="24">
                        <div style="margin-top:8px;display: block;background:#95bcc8;width:100%;text-align: left;height: 50px;border: #6690ae;border-radius: 5px 5px 5px 5px">
                            <span style="font-size: 30px;color: black;margin-left: 15px;font-weight: bold;">基本信息</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="12">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white;margin-left: 40px;">&emsp;&emsp;姓名：{{assessBasicMess.patientName}}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white;">手机号：{{assessBasicMess.patientPhone}}</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="12">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white;margin-left: 40px;">出生日期：{{assessBasicMess.patientBirth}}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white">&emsp;年龄：{{assessBasicMess.patientAge}}</span>
                        </div>
                    </el-col>
                </el-row>
                <!--评估信息-->
                <el-row style="margin-top: 10px">
                    <el-col :span="24">
                        <div style="margin-top:8px;display: block;background:#95bcc8;width:100%;text-align: left;height: 50px;border: #6690ae;border-radius: 5px 5px 5px 5px">
                            <span style="font-size: 30px;color: black;margin-left: 15px;font-weight: bold;">评估信息</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="16">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white;margin-left: 40px;">开始时间：{{assessBasicMess.startTime}}</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="16">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white;margin-left: 40px;">结束时间：{{assessBasicMess.endTime}}</span>
                        </div>
                    </el-col>

                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="12">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white;margin-left: 40px;">&emsp;&emsp;时长：{{assessBasicMess.assessTime}}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white">&emsp;得分：{{assessBasicMess.assesGrade}}</span>
                        </div>
                    </el-col>
                </el-row>
                <!--评估关节数据-->
                <el-row style="margin-top: 10px">
                    <el-col :span="24">
                        <div style="margin-top:8px;display: block;background:#95bcc8;width:100%;text-align: left;height: 50px;border: #6690ae;border-radius: 5px 5px 5px 5px">
                            <span style="font-size: 30px;color: black;margin-left: 15px;font-weight: bold;">评估关节数据</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="36">
                        <div style="margin-top:8px;text-align: left;">
                            <el-table style="margin-top: 20px;font-size: 20px;width: 750px"
                                      :data="assessListMess"
                                      border
                                      header-cell-class-name="table-header"
                            >
                                <el-table-column prop="jointName" label="评估关节训练名称" align="center"></el-table-column>
                                <el-table-column prop="explain" label="说明" align="center"></el-table-column>
                                <el-table-column prop="normal" label="正常值" align="center"></el-table-column>
                                <el-table-column  label="评估结果" align="center">
                                   <template slot-scope="scope">
                                       左：{{scope.row.leftValue }}
                                       右：{{scope.row.rightValue}}
                                   </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>
        <!--开始评估-->
        <!-- 新增弹出框 -->
        <el-dialog title="评估选择" :visible.sync="addVisible" width="40%" :before-close="closeAdd">
            <el-form ref="addForm" :rules="addFormRules" :model="addForm" label-width="90px">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="姓名:" prop="patientName">
                            <el-input v-model="addForm.patientName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="手机号:" prop="patientPhone">
                            <el-input v-model="addForm.patientPhone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="出生日期:" prop="patientBirth">
                            <el-date-picker style="width: 100%;"
                                            v-model="addForm.patientBirth"
                                            type="date"
                                            placeholder="选择日期"
                                            value-format="yyyy-MM-dd"
                                            :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="年龄:" prop="patientAge">
                            <el-input type="number" v-model="addForm.patientAge" ref="inputAge"
                                      @keyup.native="proving1"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="身份证号:" prop="patientCardNo">
                            <el-input v-model="addForm.patientCardNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="评估类型" prop="assesKey">
                            <el-select v-model="addForm.assesKey" style="width: 100%">
                                <el-option key="01" label="静态评估" value="01"></el-option>
                                <el-option key="02" label="动态评估" value="02"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                                    <el-button @click="closeAdd">取 消</el-button>
                                    <el-button type="primary" @click="saveAdd">确 定</el-button>
                                </span>
        </el-dialog>
    </div>


</template>

<script>
    import {assessData, selectByAssessId, doAdd} from '../../../api/hospital/assess';

    export default {
        name: 'user',
        data() {
            return {
                query: {
                    patientName: '',
                    startTime: '',
                    endTime: '',
                    minValue: '',
                    maxValue: ''
                },
                tableData: [],
                multipleSelection: {},
                pageTotal: 0,
                radio: '',
                visible: false,
                addVisible: false,
                addForm: {},
                assessBasicMess: {
                    patientName: '',
                    patientPhone: '',
                    patientBirth: '',
                    patientAge: '',
                    startTime: '',
                    endTime: '',
                    assesGrade: '',
                    assessTime: '',
                },
                assessListMess: [],
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now() - 8.64e7;
                    }
                },
                addFormRules: {
                    patientName: [
                        {required: true, message: '请输入患者姓名', trigger: 'blur'},
                    ],
                    patientCardNo: [
                        {required: true, message: '请输入患者身份证号', trigger: 'blur'},
                    ],
                    patientAge: [
                        {required: true, message: '长度在 1 到 3 个字符', trigger: 'blur'}
                    ],
                    assesKey: [
                        {required: true, message: '请选择评估类型', trigger: 'blur'}
                    ],
                }
            };
        },
        created() {
            this.getData();
        },
        watch: {
            'addForm.patientBirth': {
                handler: function () {
                    if (this.addForm.patientBirth !== undefined && this.addForm.patientBirth !== null && this.addForm.patientBirth !== "") {
                        //输入出生日期，自动填充年龄
                        const year = new Date().getFullYear();
                        const ptBirthYear = this.addForm.patientBirth.slice(0, 4);
                        this.$refs.inputAge.value = year - ptBirthYear;    // 给有 ref 属性的 input 赋值
                        this.addForm.patientAge = year - ptBirthYear;
                    }
                }
            },
        },
        methods: {
            // 获取后台数据
            getData() {
                console.log("this.query", this.query);
                assessData(this.query).then(res => {
                    if (res.success == true) {
                        this.tableData = res.data;
                        this.pageTotal = res.total;
                    } else {
                        this.$message.error("查询失败！");
                        this.tableData = [];
                        this.pageTotal = 0;
                    }
                });
            },
            startTimeMethod() {
                let self = this;
                return {
                    disabledDate(time) {
                        if (self.query.endTime) {
                            return new Date(self.query.endTime).getTime() <= time.getTime();
                        } else {
                            return time.getTime() > Date.now() - 8.64e6;
                        }
                    }
                }
            },
            endTimeMethod() {
                let self = this;
                return {
                    disabledDate(time) {
                        if (self.query.startTime) {
                            return new Date(self.query.startTime).getTime() >= time.getTime() || time.getTime() > Date.now() - 8.64e6;
                        } else {
                            return time.getTime() > Date.now() - 8.64e6;
                        }
                    }
                }
            },
            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageIndex', 1);
                this.getData();
            },
            // 触发重置按钮
            handleReset() {
                this.query.startTime = "";
                this.query.endTime = "";
                this.query.minValue = "";
                this.query.maxValue = "";
                this.query.patientName = "";
                this.getData();
            },
            // 多选操作
            handleSelectionChange(val) {
                console.log("val", val);
                this.multipleSelection = val;
            },
            /*返回上一层 主页*/
            handleReturn() {
                this.$router.push('/manage');
            },
            // 查看报告操作
            handleReport(index, row) {
                console.log("查看报告assessId", row.assessId);
                //根据评估id查询评估信息
                selectByAssessId({assId: row.assessId}).then(res => {
                    if (res.success == true) {
                        this.assessBasicMess = res.data;
                        this.assessListMess = res.data.assessData;
                    } else {
                        this.$message.error("查询评估信息失败！");
                    }
                });
                this.visible = true;
            },
            closeEdit() {//关闭编辑弹出框
                this.$confirm('确认关闭？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.visible = false;
                    })
                    .catch(() => {
                        this.$message({
                            message: '已取消操作'
                        });
                    });
            },
            /*开始评估按钮*/
            handleStart() {
                /* 是否选择患者*/
                // 未选择
                if (this.multipleSelection.patientName == undefined) {
                    console.log("this.multipleSelection2", 2);
                    this.addForm = {};
                    this.addVisible = true;
                } else {
                    console.log("this.multipleSelection2", 2);
                    this.addForm.patientName = this.multipleSelection.patientName;
                    this.addForm.patientPhone = this.multipleSelection.patientPhone;
                    this.addForm.patientBirth = this.multipleSelection.patientBirth;
                    this.addForm.patientAge = this.multipleSelection.patientAge;
                    this.addForm.patientCardNo = this.multipleSelection.patientCardNo;
                    this.addVisible = true;
                }
            },
            /*新增评估*/
            saveAdd() {
                // validate 函数 表单验证
                this.$refs['addForm'].validate((valid) => {
                    if (valid) {
                        if (this.addForm.ptAge < 0 || this.addForm.ptAge > 120) {
                            this.$message.warning('年龄应该在0-120范围');
                        } else {
                            console.log("this.addForm", this.addForm);
                            //提交 到后台
                            doAdd(this.addForm).then(res => {
                                if (res.success == true) {
                                    this.addVisible = false;
                                    if (res.data.assessId!==undefined && res.data.assessId!==null ){
                                        let url='';
                                        if (res.data.assesKey=='01')//静态评估
                                            {
                                            url ="\\maze_data\\game\\maze.exe";
                                        }else{//动态评估
                                            url ="\\maze_data\\game\\maze.exe";
                                        }
                                        //打开评估 exe
                                        __his.beginTraining(res.data.assesKeyText,url,res.data.assessId,(result,msg)=>{
                                            /*alert("开始执行回调!");*/
                                            let obj = JSON.parse(msg);
                                            if(!result){
                                                this.$message.success("error",obj.message);
                                            }else{
                                                this.$message.success("success",obj.message);
                                            }
                                            this.$emit("cb");
                                        });
                                    }else{
                                        this.$message.error('评估ID获取失败');
                                    }
                                } else {
                                    this.$message.error('保存失败');
                                }
                            });
                        }
                    }
                });
            },
            closeAdd() {//关闭评估弹出框
                this.$confirm('评估设置未保存，请确定是否关闭？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        //this.getData();
                        this.addVisible = false;
                        // this.addForm = {};
                    })
                    .catch(() => {
                        this.$message({
                            message: '已取消操作'
                        });
                    });
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageIndex', val);
                this.getData();
            },
            proving1(e) {
                var keynum = window.event ? e.keyCode : e.which;   //获取键盘码
                var keychar = String.fromCharCode(keynum);  //获取键盘码对应的字符
                if (keynum == 189 || keynum == 190 || keynum == 109 || keynum == 110) {
                    this.$message.warning('禁止输入小数以及负数,请重新输入');
                    e.target.value = ' ';
                    return;
                }
                if (keynum == 69) {
                    this.$message.warning('禁止输入e或E');
                    e.target.value = ' ';
                    return;
                }
            },
        }
    };
</script>

<style scoped>
    /*弹出框的文字*/
    /deep/ .el-dialog__title {
        font-size: 30px;
        color: black;
    }

    /deep/ .el-form-item__label {
        color: #39f0e1;
    }

    /*弹出框背景*/
    /deep/ .el-dialog {
        background: #829593;
    }

    /deep/ .el-dialog__header {
        padding-top: 14px;
    }

    .login-wrap {
        position: relative;
        width: 100%;
        height: 1000px;
        background-color: rgba(130, 149, 147, 0.59);
    }

    .header .logo {
        float: left;
        width: 400px;
        line-height: 50px;
        margin-top: 15px;
    }

    .btn-bell .el-icon-bell {
        color: #fff;
    }

    cascader {
        margin-left: 10px;
    }

    .user-avator img {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .header-avator img {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .handle-box {
        margin-bottom: 20px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }
</style>
